<template>
	<view class="">
		<view class=" group_title">
			<view class="group_pic">
				<view class="uppic">
					需要上传你的头像
				</view>
				<view class="unpic_r" @tap="upimg">
					<image v-if="header_img" :src="header_img"  mode="aspectFill"></image>
					<image v-else src="http://ykp-hz.oss-cn-hangzhou.aliyuncs.com/4e65404b-d6e7-4244-9917-1176f56f0b2c.png" mode=""></image>
					<view class="">
						<i class="icon">&#xe637;</i>
					</view>
				</view>
			</view>
		</view>
		<view class="group_title">起个好名字，让团更有吸引力</view>
		<input type="text" placeholder-class="place" placeholder="请输入团名" v-model="info.Title" />
		<view class="group_title">团长的名字</view>
		<input type="text" placeholder-class="place" placeholder="请输入团长的名字" v-model="info.Contacter" />
		<view class="group_title">输入一个联系电话，方便您的团员联系您哦</view>
		<input type="number" placeholder-class="place" placeholder="请输入您的手机号" v-model="info.Contact" />
		<view class="group_title">一个好的跑团口号可以增加人气哦</view>
		<input type="text" placeholder-class="place" placeholder="请输入跑团口号" v-model="info.Slogan"/>
<!-- 		<view class="group_title">团简介</view>
		<textarea placeholder-class="place" placeholder="请输入跑团简介" /> -->
		<view class="group_title">选择一个地点，让同城的能够看到</view>
		<view class="area" @tap="chooseLocation">
			<span>活动位置</span>
			<view class="area_area" v-if="!locationAddress">
				去设置 <i class="icon">&#xe637;</i>
			</view>
			<view class="area_area" v-else>
				{{locationAddress}} <i class="icon">&#xe637;</i>
			</view>
		</view>
		<!-- 同意用户协议 -->
		<!-- <view class="agree">
			<radio @click="flag = !flag" :checked="flag"/>我同意<span>《一块跑用户协议》</span>
		</view> -->
		<view class="next" @tap="torungroupapp">
			下一步
		</view>
		<navigation></navigation>
	</view>
</template>

<script>
	import navigation from '@/components/navigation/navigation.vue';
	var util = require('../util.js');
	var formatLocation = util.formatLocation;
	export default {
		components: {
			navigation
		},
		data () {
			return {
				flag:false,
				header_img:'',
				header_pic:'',
				locationAddress: '',
				info:{},
				Longitude:'',
				Latitude:'',
				Province:'',
				City:''
			}
		},
		methods: {
			// 选择活动地址
			chooseLocation: function () {
				uni.chooseLocation({
					success: (res) => {
						 // console.log (res)
							// this.hasLocation = true,
							// this.location = formatLocation(res.longitude, res.latitude),
							this.Latitude = res.latitude
							this.Longitude = res.longitude
							this.locationAddress = res.name
							 // console.log (res.name)
							uni.request({
								header: {
									'Content-Type': 'application/text'
								},
								url: 'https://restapi.amap.com/v3/geocode/regeo?location=' + res.longitude + ',' + res.latitude + '&key=57909c51d546cb0c11d85a5737cc8588',
								success: re => {
									 // console.log (re)
									this.Province = re.data.regeocode.addressComponent.province
									this.City = re.data.regeocode.addressComponent.city
								}
							});
					}
				})
			},
			change(e) {
				 // console.log (e)
			},
			torungroupapp () {
				if(!(/^1[3456789]\d{9}$/.test(this.info.Contact))){ 
				        this.toast('手机号位数不对')
				        return false; 
				    }
				if (!this.info.Title) {
					this.toast('请输入跑团名')
					return
				}else if (!this.info.Contacter) {
					this.toast('请输入团长姓名')
					return 
				}else if (!this.info.Contact) {
					this.toast('请输入手机号')
					return 
				}else if (!this.locationAddress) {
					this.toast('请设置活动地址')
					return 
				}else if (!this.info.Slogan) {
					this.toast('请输入跑团口号')
					return
				}
				this.ajax('club/createClub', {
					data:{
						Logo:this.header_img,
						Title: this.info.Title,
						Contacter: this.info.Contacter,
						Contact: this.info.Contact,
						Slogan: this.info.Slogan,
						Address: this.locationAddress,
						Longitude: this.Longitude,
						Latitude: this.Latitude,
						Province: this.Province,
						City: this.City
					},
					success: res => {
						 // console.log (res)
						if(res.code) {
							uni.navigateTo({
								url:'/pageC/rungroup/rungroupapp'
							})
						}else {
							this.toast(res.msg)
						}
					}
				})
				
			},
			upimg () {
				var that = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res) => {
				       uni.showLoading({
				       	title: '图片上传中'
				       });
				       //获取文件名称
				        // console.log (res.tempFilePaths[0]+'2')
				       var arr = res.tempFilePaths[0].split('/');
				       var filename = arr[arr.length - 1];
				        // console.log (filename+'11')
				       this.oss_upload(res, filename,{
				       	success: res =>{
							 // console.log (filename)
				       		this.header_img = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/'+filename;
				       		uni.hideLoading();
				       	},
				       	fail:(ress) =>{
				       	}
				       });
				    }
				});
			}
		}
	}
</script>

<style lang="less" scoped >
	page {
		background-color: #F2F2F2;
	}
	.group_title {
		width: 100%;
		height: 90upx;
		padding: 0 30upx;
		box-sizing: border-box;
		background-color: #F2F2F2;
		font-size: 28upx;
		color: #666;
		line-height: 86upx;
	}
	.group_pic {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #e1e1e1;
		box-sizing: border-box;
		.unpic_r {
			display: flex;
			align-items: center;
			image {
				width:60upx;
				height: 60upx;
				border-radius: 50%;
				margin-right: 20upx;
			}
			.icon {
				font-size: 24upx;
				height: 24upx;
				color: #999;
			}
		}
	}
	input {
		width: 100%;
		height: 80upx;
		box-sizing: border-box;
		padding-left: 30upx;
		font-size: 28upx;
		color: #333333;
		background-color: #FFFFFF;
	}
	textarea {
		height: 200upx;
		width: 100%;
		background-color: #FFFFFF;
		padding: 30upx;
		box-sizing: border-box;
	}
	.area {
		padding: 0 30upx;
		box-sizing: border-box;
		display: flex;
		background-color: #FFFFFF;
		justify-content: space-between;
		align-items: center;
		height: 72upx;
		font-size: 28upx;
		line-height: 72upx;
		color: #333333;
		.area_area {
			height: 72upx;
			font-size: 28upx;
			line-height: 74upx;
			color: #333333;
			display: flex;
			.icon {
				margin-left: 20upx;
				font-size: 28upx;
				line-height: 76upx;
				color: #999999;
			}
		}
	}
	.agree {
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		font-size: 28upx;
		text-align: center;
		color: #333333;
		span {
			color: #8738d1;
		}
	}
	.next {
			width: calc(100% - 60upx);
			margin: 0 auto;
			margin-top: 30upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			background-color:#8738d1 ;
			border-radius: 45upx;
			font-size: 28upx;
			color: #FFFFFF;
			margin-bottom: 30upx;
		}
</style>
